import { createFileRoute } from '@tanstack/react-router'
import { Card, Typography, Row, Col, Statistic, Progress } from 'antd'
import { UserOutlined, BarChartOutlined, FileTextOutlined, TeamOutlined } from '@ant-design/icons'

const { Title } = Typography

export const Route = createFileRoute('/dashboard')({
  component: Dashboard,
  meta: {
    label: '仪表板',
    icon: 'DashboardOutlined'
  },
} as any)

function Dashboard() {
  return (
    <div>
      <Title level={3}>仪表板</Title>
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="用户数"
              value={1128}
              prefix={<UserOutlined />}
              suffix="人"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="订单数"
              value={93}
              prefix={<FileTextOutlined />}
              suffix="单"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="销售额"
              value={245}
              prefix={<BarChartOutlined />}
              suffix="万元"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="团队数"
              value={8}
              prefix={<TeamOutlined />}
              suffix="个"
            />
          </Card>
        </Col>
      </Row>
      
      <Card title="项目进度">
        <Progress percent={75} status="active" />
      </Card>
    </div>
  )
}